import React, { Component } from 'react'
import {View, SafeAreaView, Text, ImageBackground, StyleSheet, Platform, ScrollView} from 'react-native'
import * as Animatable from 'react-native-animatable'
import Ionicons from 'react-native-vector-icons/Ionicons';
import { TextInput } from 'react-native-gesture-handler'
export default class Login extends Component {
  constructor() {
    super();
    this.state = {
      username: '',
      validateUsername: false,
      password: '',
      isValidUser: true
    }
  }
  validateUsername = (val) => {
    if(val.trim().length >= 2) {
      this.setState({
        username: val,
        isValidUser: true,
        validateUsername: true
      })
    } else {
      this.setState({
        username: val,
        isValidUser: false,
        validateUsername: false
      })
    }
  }
  handleValideUser = (val)=> {
    if(val.trim().length >= 2) {
      this.setState({
        isValidUser: true,
      })
    } else {
      this.setState({
        isValidUser: false
      })
    }
  }
  render() {
    return (
      <SafeAreaView style={[styles.container]}> 
        <ImageBackground 
          source={require('../../images/bg2.jpeg')}
          style={[styles.bgImage]}
        >
          <View style={[styles.header]}>
            <Text style={[styles.headerText]}>Welcome!</Text>
          </View>
          <Animatable.View
            animation="fadeInUpBig"
            style={[styles.footer]}
          >
            <ScrollView>
              <View style={[styles.action]}>
                <Ionicons name={'person-outline'} size={20}></Ionicons>
                <TextInput style={[styles.commonInput]} 
                  placeholder='请输入用户名'
                  value={this.state.username}
                  onChangeText={(val) => this.validateUsername(val)}
                  onEndEditing={(e) => this.handleValideUser(e.nativeEvent.text)}
                ></TextInput>
                {
                  this.state.validateUsername ? 
                  <Animatable.View animation="bounceIn">
                    <Ionicons name={'checkmark-circle-outline'} size={20}></Ionicons>
                  </Animatable.View>
                  : null
                }
              </View>
              {
                this.state.isValidUser ? null : 
                <Animatable.View animation="fadeInLeft" direction={500}>
                  <Text style={styles.errorMsg}>用户名最短是2位</Text>
                </Animatable.View>
              }
            </ScrollView>
                   
          </Animatable.View>
        </ImageBackground>
      </SafeAreaView>
    )
  }
}

const styles = StyleSheet.create({
  bgImage: {
    flex: 1,
    resizeMode: 'cover',
    justifyContent: 'center'
  },
  container: {
    flex: 1,

  },
  header: {
    flex: 1,
    justifyContent: 'flex-end',
    paddingHorizontal: 20,
    paddingBottom: Platform.OS === 'ios' ? 150 : 100,
  },
  headerText: {
    color: '#fff',
    fontWeight: 'bold',
    fontSize: 30,
    textAlign: 'center'
  },
  footer: {
    flex: 3,
    backgroundColor: '#fff',
    borderTopLeftRadius: 40,
    borderTopRightRadius: 40,
    paddingHorizontal: 20,
    paddingVertical: 30
  },
  action: {
    flexDirection: 'row',
    marginTop: 5,
    borderBottomWidth: 1,
    borderBottomColor: '#f2f2f2',
    paddingBottom: 5
  },
  commonInput: {
    flex: 1,
    marginTop: Platform.OS === 'ios' ? 0 : -12,
    paddingLeft: 10,
    color: '#05375a'
  },
  errorMsg: {
    fontSize: 14,
    color: 'red'
  }
})